/*
 * 地址选择
 */
'use strict';
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableHighlight,
    Image,
    PixelRatio,
    CameraRoll,
    TouchableOpacity,
    Dimensions,
    TextInput,
} from 'react-native';


import QRCode from 'react-native-qrcode';

import Toast from 'antd-mobile/lib/toast';
import List from 'antd-mobile/lib/list';
import ActivityIndicator from 'antd-mobile/lib/activity-indicator';
import Popup from 'antd-mobile/lib/popup';
import Modal from 'antd-mobile/lib/modal';
import Grid from 'antd-mobile/lib/grid';
import * as WechatAPI from 'react-native-wx';
const alert = Modal.alert;
const operation = Modal.operation;

import NavTitle from '../component/NavTitle';

import XFetch from '../XFetch';
import * as QQAPI from 'react-native-qq';
import MyWebView from '../utils/MyWebView';


class ErweimaService extends Component {
    constructor(props) {
        super(props)

        this.state = {
            text:'http://www.weiweigo.com',
            animating:true,
            address:void 0,
            content:void 0,
            title:void 0,
            logo:'',
            result:{},
            tel:10086
        }
    }

    componentDidMount(){
        this._getData();
    }

    _getData(){
        XFetch(`http://www.weiweigo.com/app/server.aspx?method=showDetail&serveid=${this.props.id}`,{
            method:'GET',
        }).then(data=>{
            this.setState({
                result:data,
                address:data.addressDetail,
                animating:false,
                content:data.summary,
                title:data.title,
                text:`http://www.weiweigo.com/servedetail.aspx?serveid=${data.serveId}&aid=${data.addressId}`,
                logo:data.imgUrl,
                tel:data.tel
            })
        });
    }

    _saveImg(){
        CameraRoll.saveToCameraRoll(`http://www.weiweigo.com/app/content.aspx?method=getQrcode&url=http://www.weiweigo.com/servedetail.aspx?serveid=${this.state.result.serveId}&aid=${this.state.result.addressId}`).then(data=>{
            Toast.success('保存成功',2);
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <NavTitle
                    title='服务二维码'
                    leftButton = {true}
                    leftImg = {require('../imgs/left.png')}
                    leftText = {'返回'}
                    leftHander = {()=>{this.props.navigator.pop()}}
                    headColor = '#fbdc3a'
                    rightButton={true}
                    rightText = "操作"
                    rightHander={()=>{
                        Popup.show(
                            <Grid hasLine={false} onClick={(ele,index)=>{
                                if(index === 0){
                                    this._saveImg();
                                }else if(index === 1){
                                    WechatAPI.shareToSession({
                                        type: 'text',
                                        text: this.state.text
                                    })
                                }else if(index === 2){
                                    WechatAPI.shareToTimeline({
                                        type: 'text',
                                        text: this.state.text
                                    })
                                }else if(index === 3){
                                    QQAPI.shareToQQ({
                                        type: 'news',
                                        title: '微微购',
                                        description: '微微购服务详情分享',
                                        webpageUrl: this.state.text,
                                        imageUrl: 'http://ouxiurkf8.bkt.clouddn.com/2017-08-21_DOtOgI4n.png',
                                    });
                                }else if(index === 4){
                                    QQAPI.shareToQzone({
                                        type: 'news',
                                        title: '微微购',
                                        description: '微微购服务详情分享',
                                        webpageUrl: this.state.text,
                                        imageUrl: 'http://ouxiurkf8.bkt.clouddn.com/2017-08-21_DOtOgI4n.png',
                                    });
                                }else{
                                    this.props.navigator.push({
                                        component:MyWebView,
                                        name:'MyWebView',
                                        params:{
                                            path:this.state.text
                                        }
                                    })
                                }
                                Popup.hide();
                            }} data={[{
                                icon: require('../imgs/erweima1.png'),
                                text: `保存`,
                            },{
                                icon: require('../imgs/erweima2.png'),
                                text: `分享好友`,
                            },{
                                icon: require('../imgs/erweima3.png'),
                                text: `分享朋友圈`,
                            },{
                                icon: require('../imgs/erweima5.png'),
                                text: `分享QQ`,
                            },{
                                icon: require('../imgs/erweima6.png'),
                                text: `分享空间`,
                            },{
                                icon: require('../imgs/erweima4.png'),
                                text: `识别`,
                            }]} columnNum={3} renderItem={(ele,index)=>{
                                return (
                                    <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                                        <Image source={ele.icon} style={{width:42,height:42}}/>
                                        <Text style={{marginTop:5}}>{ele.text}</Text>
                                    </View>
                                )
                            }}/>
                        ,{animationType: 'slide-up',onMaskClose(){},maskClosable:true});
                    }}
                />
                <View style={styles.info}>
                    <View style={styles.content}>
                        <View style={styles.store}>
                            <View style={styles.logo}>
                                <Image
                                    source={{uri:`http://www.weiweigo.com${this.state.logo}`}}
                                    style={styles.image}>

                                </Image>
                            </View>
                            <View style={styles.base}>
                                <Text style={styles.name}>{this.state.title}</Text>
                                <View style={styles.where}>
                                    <Image style={{width:10,height:12,marginRight:3}} source={require('../imgs/address.png')}/>
                                    <Text style={styles.address}>{this.state.address}</Text>
                                </View>
                            </View>
                        </View>
                        <QRCode
                            value={this.state.text}
                            size={Dimensions.get('window').width-70}
                            bgColor='black'
                            fgColor='white'/>
                        <View>
                            <Text numberOfLines={3} style={styles.remark}>
                                {this.state.content}
                            </Text>
                            <Text style={styles.remark}>{this.state.tel}</Text>
                        </View>
                    </View>
                </View>
                <ActivityIndicator
                    toast
                    text="正在加载"
                    animating={this.state.animating}
                />
            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#3e3a39',
        flex: 1,
    },
    itemStyle:{
        flexDirection:'row'
    },
    keys:{
        marginRight:10,
    },
    content:{
        backgroundColor:'#FFF',
        paddingLeft:15,
        paddingRight:15,
        paddingTop:10,
        paddingBottom:10
    },
    info:{
        padding:20,
        flex:1,
        alignItems:'center',
        justifyContent:'center'
    },
    store:{
        flexDirection:'row',
        marginBottom:10
    },
    image:{
        width:64,
        height:64
    },
    base:{
        flex:1,
        justifyContent:'center',
        paddingLeft:10
    },
    name:{
        color:'#333',
        fontWeight:'600'
    },
    where:{
        flexDirection:'row',
        marginTop:5,
        alignItems:'center',
    },
    address:{
        fontSize:12,
        color:'#999',
    },
    remark:{
        color:'#999',
        marginTop:10
    }
});

export default ErweimaService;
